<template>
  <div class="image-preview-container">
    <el-image
      v-if="imageUrl"
      :src="imageUrl"
      :preview-src-list="[imageUrl]"
      fit="contain"
    >
      <template #error>
        <div class="image-error">
          <i class="el-icon-picture-outline"></i>
        </div>
      </template>
    </el-image>

    <!-- 当没有图片时显示占位符 -->
    <div v-else class="no-image">
      <i class="el-icon-picture-outline"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImagePreview',
  props: {
    // 接收图片URL作为prop
    src: {
      type: String,
      default: null
    }
  },
  computed: {
    // 处理图片URL，可以添加默认值或处理相对路径
    imageUrl() {
      if (!this.src) return null;

      // 如果已经是完整URL直接返回
      if (this.src.startsWith('http')) {
        return this.src;
      }

      // 否则拼接基础路径
      // 这里使用和 upload/index.vue 中一致的格式
      return `https://jinghaiyang.oss-cn-beijing.aliyuncs.com/app/upload/${this.src}`;
    }
  }
};
</script>

<style scoped lang="scss">
.image-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.el-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #999;
  font-size: 12px;

  i {
    font-size: 24px;
    margin-bottom: 4px;
  }
}

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  background-color: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  color: #999;
  font-size: 12px;

  i {
    font-size: 24px;
    margin-bottom: 4px;
  }
}
</style>
